<template>
  <div id='consult'>
    <div id='entirety'
         style="background-image: url('/static/background/background.png');padding: 10px;min-height: 89vh">
      <div class='title_row'>
        <div class='title_box'>
          <div class='title_box_text'>
            资源推荐
          </div>
          <div class='title_box_hr'></div>
        </div>　
      </div>
      <div class='card2'>
        <el-row :span='24'>
          <el-col :span='7'>
            <el-row>
              <el-col>
                <div class='clearfix'>
                  <span>资源需求预测</span>
                </div>
                <el-card class='card2-inner'>
                  <div class='card-chart-box' style='margin-top: -50px;'>
                    <div id='medium_term_chart' style='height: 23vh'></div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class='clearfix'>
                  <span>实时价格监测</span>
                </div>
                <el-card class='card2-inner'>
                  <div style='text-align: center;'>
                    <span class='card1_inner_num'>总费用</span>
                    <span class='card1_inner_num'>${{ totalPrice }}</span>
                  </div>
                  <div class='card-chart-box' style='margin-top: -50px;'>
                    <div id='short_term_chart' style='height: 23vh'></div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span='2' style='display: flex; justify-content: center; align-items: center;'>
            <img src='/static/kt2/jiantou.png' style='max-width: 100%; max-height: 100%;margin-top: 22vh;'>
          </el-col>
          <el-col :span='6'>
            <div class='clearfix'>
              <span>资源推荐算法模型</span>
              <el-card>
                <img src='/static/kt2/suanfa.png' style='max-width: 100%; height: auto;margin-top: 5vh;'>
              </el-card>
            </div>
          </el-col>
          <el-col :span='2' style='display: flex; justify-content: center; align-items: center;'>
            <img src='/static/kt2/jiantou.png' style='max-width: 100%; max-height: 100%;margin-top: 22vh;'>
          </el-col>
          <el-col :span='6'>
            <el-card class='taocanCard'>
              <div class='clearfix'>
                <img src='/static/kt2/duihao.png'>
                <span>已为您生成最优购买套餐</span>
                <el-row class='taocan'>
                  <el-radio v-model="dqtc" label="price" border @input='getCloudInfo'>低延迟</el-radio>
                </el-row>
                <el-row class='taocan'>
                  <el-radio v-model="dqtc" label="ptoc" border @input='getCloudInfo'>高算力</el-radio>
                </el-row>
                <el-row class='taocan'>
                  <el-radio v-model="dqtc" label="capacity" border @input='getCloudInfo'>低能耗</el-radio>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :span='24'>
          <el-col :span='7'>
            <div class='clearfix'>
              <span>时延趋势</span>
            </div>
            <el-card class='card2-inner'>
              <div class='card-chart-box' style='margin-top: -50px;'>
                <div id='medium_term_chart1' style='height: 23vh'></div>
              </div>
            </el-card>
          </el-col>

          <el-col :span='7' :offset="1">
            <div class='clearfix'>
              <span>成本趋势</span>
            </div>
            <el-card class='card2-inner'>
              <div class='card-chart-box' style='margin-top: -50px;'>
                <div id='medium_term_chart2' style='height: 23vh'></div>
              </div>
            </el-card>
          </el-col>

          <el-col :span='7' :offset="1">
            <div class='clearfix'>
              <span>能耗趋势</span>
            </div>
            <el-card class='card2-inner'>
              <div class='card-chart-box' style='margin-top: -50px;'>
                <div id='medium_term_chart3' style='height: 23vh'></div>
              </div>
            </el-card>
          </el-col>

        </el-row>


        <el-row :span='24' style='max-height:25vh; overflow-y:scroll;margin-top: 10px' v-loading='isLoading'
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.3)">
          <el-col :span='24' v-for='(cloudInfo, index) in cloudData' :key='index'>
            <el-card class='taocanCard'>
              <el-row :span='24' class='tanbleTitle'>
                <el-col :span='2'><span style='font-size: 20px'>{{cloudInfo.name}}</span></el-col>
                <el-col :span='4' style='margin-top: 8px;'><span>推荐购买费用共计： ￥{{cloudInfo.totalPrice}}</span></el-col>
              </el-row>
              <el-row>
              </el-row>
              <el-table :data='cloudInfo.items' :row-style="{height: '30px'}" :cell-style="{padding: '0'}" highlight-current-row='false'
                        :header-row-style="{height: '40px'}" :header-cell-style="{padding: '0'}" border class='cloudTable'>
                <el-table-column prop='instanceTypeFamily' label='规格族' :show-overflow-tooltip='true' fixed width='120'>
                </el-table-column>
                <el-table-column prop='instanceTypeName' label='实例规格' fixed></el-table-column>
                <el-table-column prop='cpuCoreCount' label='vCPU（核）' width='100' :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column prop='memorySize' label='内存（GB）' width='100' :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column prop='arch' label='架构' width='60' :show-overflow-tooltip='true'></el-table-column>
                <el-table-column prop='processorModel' label='处理器' :show-overflow-tooltip='true'></el-table-column>
                <el-table-column prop='gpuSpec' label='GPU型号' :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column prop='gpuMemorySize' label='GPU显存（GB）' width='120' :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column prop='gpuAmount' label='GPU数量' width='80' :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column prop='postpaidHourPrice' label='参考价格（/小时）' :show-overflow-tooltip='true' width='130' fixed='right'>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script src='./js/index.js'>
</script>

<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/consult.scss';
</style>
